<template>
  <div>
    <div class="maskContent" v-show="!isEdit">
        <section class="topic">
            <div class="messageCan">
                <div class="fixTop">
                    <span v-show=" topicData.priority === 1 || topicData.priority === 2 ">[ {{topicData.priorityDesc}} ]</span> &nbsp;
                    <span>{{topicData.title}}</span>
                </div>
            </div>
            <topic @toEdit="editTopic" :topicData="topicData" />
        </section>
        <div v-show="comments" class="commentContain">
          <comment :replyVoPage="topicData.replyVoPage || '' " />
          <div class="pagination">
            <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm" :pagePropArray="['replyVoPage']" @on-query="queryCallBackFn"/>
          </div>
        </div>
    </div>
    <Edit :id='topicMsg' v-if="isEdit" />
  </div>
</template>
<script>
  import Comment from './components/comment.vue';
  import Topic from './components/topic.vue';
  import PcPagination from '../../../../components/form/pagination';
  import Edit from './edit.vue';
  import {mapState} from 'vuex';
  export default{
    props: ['id'],
    data () {
      return {
        topicMsg: '',
        tagShow: true,
        pageUrl: {
          queryDataList: '/ibs/web/bbs/detail'
        },
        isEdit: false
      };
    },
    methods: {
      queryCallBackFn (res) {
        // 把数据保存到vuex 的state里，再用mapState获取；
        this.$store.dispatch('paginationStore', res.result);
      },
      queryDataFn () {
       // 传true 代表完全从新刷新，状态也重新开始， 传false 代表使用当前的状态，更新数据
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      editTopic (topicData) {
        this.topicMsg = topicData.id;
        this.isEdit = !this.isEdit;
      }
    },
    computed: {
      ...mapState(['paginationData']),
      comments () {
        let result;
        if (this.topicData) {
          if (this.topicData.replyVoPage) {
            result = !(this.topicData.replyVoPage.total === '0');
          }
        } else {
          result = false;
        }
        return result;
      },
      topicData () {
        return this.paginationData.topicData;
      },
      dataQueryForm () {
        return {id: this.id};
      }
    },
    components: {
      Comment,
      Topic,
      PcPagination,
      Edit
    }
  };
</script>
<style lang="less" rel="stylesheet/less" scoped>
.maskContent{
  background: #fff;
  width: 100%;
  padding: 15px;
  .topic{
    .messageCan{
      background: #fff;
      .fixTop{
          padding-bottom: 20px;
          border-bottom: 1px solid #eee;
      }
    }
  }
  .commentContain{
    background: #fff;
    .pagination{
      display: flex;
      flex-direction: row-reverse;
    }
  }

}
</style>

